<template>
    <PageLayout>

        <template #head>
            <div class="bus-head">
               
                <div class="bus-search">
                    <WrapperSearch @super-search="onSuperSearch"
                        @search="onSearch" @reset="onReset">
                        <el-input v-model="searchKey" style="width: 300px;" placeholder="请输入姓名" clearable
                            @clear="ResetPage">
                        </el-input>
                        <template #super>
                            <SuperSearch />
                        </template>
                    </WrapperSearch>
                </div>
                <div class="bus-opt">
                    <el-button type="primary" @click="tapAdd">{{t('createUser')}}</el-button>
                </div>
            </div>
        </template>

        <el-table :data="list" row-key="id">
            <CheckColumn :list="list" v-model="checkedColumn"></CheckColumn>
            <el-table-column :label="$t('pages.list_demo.table.realname')" #default="{ row }">
                <div class="main-color" @click="tapDetail(row)">{{ row.realname }}</div>
            </el-table-column>
            <el-table-column :label="t('table.gender')" width="90" align="center" :formatter="(row) => {
                return row.gender ? (row.gender == 1 ? '男' : '女') : '';
            }" />

            <el-table-column prop="email" label="邮箱" />
            <el-table-column :label="Locale('pages.list_demo.table.createTime')" :formatter="(row) => {
                return FormateDate(row.createTime, 'YYYY-MM-DD');
            }" />

            <el-table-column label="操作" width="180" #default="{ row }">
                <TableBtns>
                    <TableBtn @click="tapDetail(row)" v-if="AuthCheck('apply_list:load')">详情</TableBtn>
                    <TableBtn @click="tapEdit(row)">{{t('optText')}}</TableBtn>
                    <TableBtn type="danger" @click="tapDel(row)">{{t('delText')}}</TableBtn>
                    <TableBtn>操作3</TableBtn>
                    <TableBtn disabled>操作4</TableBtn>
                </TableBtns>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="footer-opts">
                <MultiTip :count="checkedColumn.length" :showZero="true" @remove-all="removeAllCheck" />
            </div>
            <WrapperPage v-model:page-size="pageInfo.pageSize" :page-sizes="pageSizes" :total="pageInfo.total"
            @current-change="PageIndexChange" @size-change="PageSizeChange" v-model:current-page="pageInfo.pageIndex" />
        </template>
       
    </PageLayout>
</template>

<script setup name="PersonManage">
import { SuccessAjax, FormateDate } from "hongshu-view";
import { ref, onMounted,onActivated } from "vue";
import api from "~api";

import {createRouter } from "~public/tools/Router";;
import { Page } from "~public/tools/PageTool";

import SuperSearch from "./SuperSearch.vue";
import CheckColumnTool from "~tools/CheckColumnTool";
import {AuthCheck} from "~tools/AuthTool";
import {ShortLocale,Locale} from "~tools/LocaleTool";

const t = ShortLocale("pages.list_demo");

const {checkedColumn,removeAllCheck} = CheckColumnTool();


const list = ref([]);
const searchKey = ref("");
let searchInfo = {};




const router = createRouter();


const loadList = () => {

    SuccessAjax(api.list, {
        keyword: searchKey.value,
        ...searchInfo,
    }, {
        method: "get",
        pageInfo
    }).then(({ data }) => {
        list.value = data;
    })
};

const { pageInfo, pageSizes, ResetPage, PageIndexChange, PageSizeChange,ReduceCount } = Page(loadList);


const onSearch = () => {
    ResetPage();
}

const onSuperSearch = (info) => {
    searchInfo = info;
    ResetPage();
}

const onReset = () => {
    searchKey.value = "";
    searchInfo = {};
    ResetPage();
}

const tapAdd = () => {
    router.push({
        path: "/opt_demo",
        query: {
            optType: "add",
        }
    })
}

const tapDetail = (info)=>{
    router.push({
        path: "/detail_demo",
        query: {
            id:info.id
        }
    })
}

const  tapEdit = (info)=>{
    router.push({
        path: "/opt_demo",
        query: {
            optType: "edit",
            id:info.id
        }
    })
}

const tapDel = (info) => {
    SuccessAjax(api.delete + "/" + info.id,{}, {
        method: "delete",
        successMsg:true,
        confirmMsg:t("delConfirmMsg",{realname:info.realname})

    }).then(() => {
        ReduceCount();
    });
};


onMounted(() => {
    loadList();

});
onActivated(loadList);

</script>

<style lang="less" scoped></style>